<template>
  <div>
    <!--面包屑-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>菜单管理</el-breadcrumb-item>
      <el-breadcrumb-item>菜单列表
      </el-breadcrumb-item>
    </el-breadcrumb>

    <!--卡片-->
    <el-card class="box-card">
      <!-- 搜索与添加区域 -->
      <el-button type="primary" @click="addDialogVisible = true" class="addBtn">添加菜单</el-button>

      <!--菜单表格-->
      <tree-table class="treeTable" :data="treeList" :columns="columns"
                  :selection-type="false" :expand-type="false"
                  show-index index-text="#" border :show-row-hover="false" >

        <!--是否显示-->
        <template slot="isShowTemp" slot-scope="scope">
          <el-tag size="mini" type="success" v-if="scope.row.isShow === 1">显示</el-tag>
          <el-tag size="mini" type="danger" v-else>不显</el-tag>
        </template>

        <!--菜单类型-->
        <template slot="menuType" slot-scope="scope">
          <el-tag size="mini" v-if="scope.row.type === 1">目录</el-tag>
          <el-tag type="success" size="mini" v-if="scope.row.type === 2">菜单</el-tag>
          <el-tag type="warning" size="mini" v-if="scope.row.type === 3">按钮</el-tag>
        </template>

        <!--操作-->
        <template slot="opt" slot-scope="scope">
          <el-tooltip :enterable="false" effect="dark" content="编辑菜单" placement="top">
            <el-button type="success" icon="el-icon-edit" size="mini" @click="editBtn(scope.row.menuId)"></el-button>
          </el-tooltip>
          <el-tooltip :enterable="false" effect="dark" content="删除菜单" placement="top">
            <el-button type="danger" icon="el-icon-delete" size="mini" @click="delBtn(scope.row.menuId)"></el-button>
          </el-tooltip>
        </template>
      </tree-table>

    </el-card>

    <!--添加菜单对话框-->
    <el-dialog title="添加菜单" :visible.sync="addDialogVisible" width="50%" @close="addHandleClose">
    <span>
      <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="80px" >
        <el-form-item label="菜单名称" prop="menuName">
          <el-input v-model="addForm.menuName"></el-input>
        </el-form-item>
        <el-form-item label="匹配路由" prop="url">
          <el-input v-model="addForm.url"></el-input>
        </el-form-item>
        <el-form-item label="权限标识" prop="perms">
          <el-input v-model="addForm.perms"></el-input>
        </el-form-item>
        <el-form-item label="导航显示">
          <el-radio-group v-model="addForm.isShow">
            <el-radio :label=1>显示</el-radio>
            <el-radio :label=0>不显示</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="父级菜单">
          <el-cascader
                       v-model="addForm.pidList"
                       :options="treeList"
                       :props="defaultProps"
                       @change="addHandleChange"
                       clearable></el-cascader>
        </el-form-item>

      </el-form>
      <!--底部区域-->
    </span>
      <span slot="footer" class="dialog-footer">
      <el-button @click="addDialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="addClick">确 定</el-button>
    </span>
    </el-dialog>

    <!--编辑菜单对话框-->
    <el-dialog title="编辑菜单" :visible.sync="editDialogVisible" width="30%" @close="editHandleClose">
    <span>
      <el-form :model="editForm" label-width="70px" ref="editFormRef">
        <el-form-item label="菜单名称" >
         <el-input v-model="editForm.menuName"></el-input>
        </el-form-item>
        <el-form-item label="匹配路由" prop="url">
          <el-input v-model="editForm.url"></el-input>
        </el-form-item>
              <el-form-item label="权限标识" >
          <el-input v-model="editForm.perms"></el-input>
        </el-form-item>
        <el-form-item label="导航显示">
          <el-radio-group v-model="editForm.isShow">
            <el-radio :label=1>显示</el-radio>
            <el-radio :label=0>不显示</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="父级菜单">
          <el-cascader
                  v-model="editForm.pidList"
                  :options="treeList"
                  :props="defaultProps"
                  @change="editHandleChange"
                  clearable></el-cascader>
        </el-form-item>
      </el-form>
      <!--底部区域-->
    </span>
      <span slot="footer" class="dialog-footer">
      <el-button @click="editDialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="editClick">确 定</el-button>
    </span>
    </el-dialog>

  </div>
</template>

<script>
  //请求
  import {menuHttp} from 'network/menu'

  export default {
    data() {
      return {
        addDialogVisible: false,
        editDialogVisible: false,
        defaultProps: {
          checkStrictly: true,
          expandTrigger: 'hover',
          children: 'children',
          label: 'menuName',
          value: 'menuId'
        },
        menuIdList:[],
        treeList: [],
        columns: [
          {
            label: '菜单名称',
            prop: 'menuName'
          },
          {
            label: '路由匹配',
            prop: 'url'
          },
          {
            label: '权限标识',
            prop: 'perms'
          },
          {
            label: '导航显示',
            prop: 'isShow',
            type: 'template',
            template: 'isShowTemp'
          },
          {
            label: '分类等级',
            prop: 'type',
            type: 'template',
            template: 'menuType'
          },
          {
            label: '操作',
            type: 'template',
            template: 'opt'
          }
        ],
        addForm:{
          pid:'',
          pidList:[],
          type:'',
          menuName: '',
          url: '',
          perms: '',
          isShow: 0,
        },
        addFormRules: {
          menuName: [
            { required: true, message: '请输入菜单名称', trigger: 'blur' },
            {
              min: 3,
              max: 10,
              message: '用户名的长度在3~10个字符之间',
              trigger: 'blur'
            }
            ],
          perms: [
            { required: true, message: '请输入菜单标识', trigger: 'blur' }
          ]

        },
        editForm:{
          menuId: '',
          menuName: '',
          pid:'',
          pidList:[],
          type:'',
          perms: '',
          url: '',
          isShow: '',
        },
      };
    },
    methods: {
      //监听添加菜单对话框的关闭事件，重置表单内容
      addHandleClose(){
        this.$refs.addFormRef.resetFields()
        this.addForm.pid = 0
        this.addForm.pidList = []
        this.addForm.type = 1
        this.addForm.isShow = 0
      },

      //监听编辑菜单对话框的关闭事件,重置表单内容
      editHandleClose(){
        this.$refs.editFormRef.resetFields()
        this.editForm.pid = 0
        this.editForm.pidList = []
        this.editForm.type = 1
      },

      addHandleChange(){
        // 获取菜单id列表长度，计算当前菜单的类型
        const  len = this.addForm.pidList.length
        if (len > 0) {
          this.addForm.pid = this.addForm.pidList[len -1]
          this.addForm.type = len + 1
        }else {
          // 父级菜单为空时，默认类型（type）为1，父级id（pid）为0
          this.addForm.pid = 0
          this.addForm.pidList = [0]
          this.addForm.type = 1
        }
      },

      // 级联框时间处理
      editHandleChange(){
        // 获取菜单id列表长度，计算当前菜单的类型
        const  len = this.editForm.pidList.length
        if (len > 0) {
          this.editForm.pid = this.editForm.pidList[len -1]
          this.editForm.type = len + 1
          console.log(this.editForm.type);
        }else {
          // 父级菜单为空时，默认类型（type）为1，父级id（pid）为0
          this.editForm.pid = 0
          this.editForm.pidList = [0]
          this.editForm.type = 1
        }
      },

      //添加用户
      addClick(){
        // 1.校验表单
        this.$refs.addFormRef.validate(valid =>{
          if (!valid) return
          // 2.发送请求
          menuHttp.add(this.addForm).then(res=>{
            if (res.code === 20000){
              this.$message.success(res.message)
              // 3.刷新数据
              this.initList()
            } else{
              this.$message.error(res.message)
            }
            // 4.关闭对话框
            this.addDialogVisible = false;
          })
        })
      },

      //编辑菜单按钮
      editBtn(menuId){
        // 1.保存菜单id
        this.editDialogVisible = true;
        this.editForm.menuId = menuId
        // 2.获取菜单详情
        menuHttp.get(menuId).then(res => {
          this.editForm = res.data
        })
      },
      //确认编辑菜单
      editClick(){
        // 1.发送请求
        menuHttp.edit(this.editForm).then(res => {
          if (res.code === 20000){
            this.$message.success(res.message)
            // 2.刷新数据
            this.initList()
          } else{
            this.$message.error(res.message)
          }
          // 3.关闭对话框
          this.editDialogVisible = false;
        })
      },

      //删除菜单按钮
      delBtn(menuId) {
        this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          //确认操作
          menuHttp.del(menuId).then(res=>{
            if (res.code === 20000){
              this.$message.success(res.message)
              //刷新数据
              this.initList()
            } else{
              this.$message.error(res.message)
            }
          });
        })
      },

      //初始化列表页面
      initList(){
        menuHttp.tree().then(res => {
          this.treeList = res.data;
        })
      },
    },
    created(){
      //初始化页面列表
      this.initList()
    }
  }
</script>

<style scoped>
  .addBtn{
    margin: 10px 0;
  }
</style>
